<script type="text/javascript">
    $(document).ready(function(){
        $('.hover').hover(function(){
                $(this).addClass('flip');
        },function(){
                $(this).removeClass('flip');
        });
        // set up click/tap panels
        $('.click').hover(function(){
                $(this).addClass('flip');
        },function(){
                $(this).removeClass('flip');
        });
    });
</script>

<?php $count = 0;

?>
<?php foreach ($query_course as $row): ?>
    <?php $count++;?>
<?php endforeach; ?>
<div id="lecture" style="height: <?php echo 246*($count+2)/3;?>"> 
<?php foreach ($query_course as $row): ?>
<div id="lecture-item">
        <div class="hover panel">
            <div class="front">
                <?php
                    $image_properties = array(
                        'src' => 'images/course_logos/'.$row->course_img_path,
                        'width' => '300',
                        'height' => '185.4101966249684',
                        //'alt' => $row->NAME,
                        //'title' => $row->NAME
                    );
                    echo "<a href='$row->course_txt_introduce' style='text-decoration: none'>".img($image_properties)."</a>"; 
                ?>
            </div>
            <div class="back">
                <?php
                    echo "<a href='$row->course_txt_introduce'>Thông tin môn học</a>"; 
                ?>
            </div>
        </div>
    </div>
<?php endforeach; ?>
</div>